import Draggable from "react-draggable";
import { Modal } from "antd";
import { useDrag } from "@/hooks";
import PropTypes from "prop-types";
import { useState } from "react";

const ModalDragComponent = ({ title = "Model title", children, onCancel, onClosed, ...resProp }) => {
  const [draggleRef, bounds, onStart] = useDrag();
  const [disabled, setDisabled] = useState(true);

  const onModalCancel = (e, ...arg) => {
    // 点击取消
    if (e === undefined || (e.type === "click" && e.target.textContent)) {
      return onCancel && onCancel(e, ...arg);
    }

    return onClosed ? onClosed(e, ...arg) : onCancel(e, ...arg);
  };

  return (
    <Modal
      width=""
      className="modal-draggable"
      {...resProp}
      title={
        <div
          style={{ width: "100%", padding: "16px 24px", cursor: "move" }}
          onMouseOver={() => setDisabled(false)}
          onMouseOut={() => setDisabled(true)}
        >
          {title}
        </div>
      }
      okText="确定"
      cancelText="取消"
      onCancel={onModalCancel}
      maskClosable={false}
      modalRender={(modal) => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          nodeRef={draggleRef}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
    >
      {children}
    </Modal>
  );
};
ModalDragComponent.propTypes = {
  title: PropTypes.string,
  showRender: PropTypes.element,
  children: PropTypes.element,
  onCancel: PropTypes.func,
  onClosed: PropTypes.func,
};

export default ModalDragComponent;
